<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Tezero layout - umd</title>
  <link rel="stylesheet" href="../../dist/layout/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js" integrity="sha512-XSmbX3mhrD2ix5fXPTRQb2FwK22sRMVQTpBP2ac8hX7Dh/605hA2QDegVWiAvZPiXIxOV0CbkmUjGionDpbCmw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- <script src="../../dist/index.min.js"></script> -->
  <script src="../../dist/core/tezero.core.js"></script>
  <!-- <script>
    window.THREE=Tezero.THREE;
  </script> -->
  <script src="../../dist/layout/tezero.layout.js"></script>
  
  <script src="./tools.js"></script>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    #container{
      width:100vw;
      height:100vh;
      overflow: hidden;
    }
    .header{
      position: absolute;
      width: auto;
      top: 4px;
      left: 204px;
      height: 30px;
      z-index: 999;
    }
  </style>
</head>
<body>
  <div class="header tezero-layout">
    <button id="play" class="tezero-btn">启动</button>
    <!-- <button id="open" class="tezero-btn">打开</button> -->
    <button id="open" class="tezero-btn">打开</button>
    <button id="export"  class="tezero-btn">保存</button>
    <button id="import"  class="tezero-btn">导入</button>
  </div>
  <div id="container">
  </div>
  <script>
    window.onload=e=>{ 
      console.log(e);
    
    const tl=new tezero.layout.TezeroLayout(document.querySelector('#container'),window.toolGroups,{theme:'light'});

    // tl.tezero.background='#cccccc';
    tl.tezero.control={
      autoRotate:false,
      enableDamping: true,
      dampingFactor: 0.05
    }
    // 加载天空盒HDR到场景
    // tl.tezero.loadHDR('./sky.hdr');



    // 注册图表组件
    tl.tezero.register({
      echart:(data)=>{

          const dom= document.createElement('div');
          dom.style.pointerEvents='none';
          dom.style.width=data.width+'px';
          dom.style.height=data.height+'px';
          dom.style.backgroundColor='rgba(0,0,0,0.2)';
          var myChart = echarts.init(dom,'dark');
          
          myChart.on('click', function (params) {
            console.log(params);
            tl.tezero.select(object);
          });

          // 绘制图表
          myChart.setOption(data.options);

          const object=new Tezero.DomObject(dom,{
              width:data.width,
              height:data.height,
              depth: 0.2,
              color: 0x0000ff,
              opacity: 0.3,
              wireframe: false
          });
          object.name = '图表';
          object.scale.x=0.02;
          object.scale.y=0.02;
          // object.scale.z=0.02;

          object.userData.html=data;

          return object;
      }
    });
    

    document.getElementById('play').onclick=e=>{
      if(e.target.innerText.trim()==='启动'){
        e.target.innerText='停止';
        tl.tezero.startPlayer();
      }else{
        e.target.innerText='启动';
        tl.tezero.stopPlayer();
      }
    }
    document.getElementById('open').onclick=e=>{
      tl.tezero.load();
    }
    document.getElementById('export').onclick=e=>{
      tl.tezero.download();
    }
    document.getElementById('import').onclick=e=>{
      tl.tezero.importFiles();
    }
  };
  </script>
</body>
</html>